<template>
	<view class="wrap">
		<view class="">
			<u-navbar title="订单详情" bgColor="transparent" :fixed="false" autoBack>
			</u-navbar>
		</view>
		<view class="box_top" v-if="detail.orderStatus==0">
			<view class="flex">
				<text class="f42 fw500">待支付，剩余</text>
				<view class="ml10 cff7 f40">
					<u-count-down :time="detail.downTimes" format="HH:mm:ss" @finish="getOrderdetail()"></u-count-down>
				</view>
			</view>
			<p class="mt10">超过30分钟未支付，订单将自动取消</p>
		</view>
		<view class="box_top" v-if="detail.orderStatus==1">
			<p class="f42 fw500">待使用</p>
			<p class="mt10" v-if="detail.goodsInfo.lifespan!=null">请在{{expiration_time | formatDate('-')}}（含）前到店消费</p>
		</view>
		<view class="box_top" v-if="detail.orderStatus==4">
			<p class="f42 fw500">交易成功</p>
			<p class="mt10">感谢购买，期待再次光临</p>
		</view>
		<view class="box_one">
			<view style="display: flex;" class="" @click="openUrl('/groupPurchase/detail/index?id='+detail.proId)">
				<image :src="api_host+detail.goodsInfo.icon" style="width: 165rpx;height: 165rpx;border-radius: 23rpx;">
				</image>
				<view class="flex1">
					<view class="f32 fw500 ml20 textoverflow" style="width: 350rpx;">
						<text>{{detail.goodsInfo.goodName}}</text>
						<!-- <image class="ml10" src="../static/caractere/righton.png" style="width: 32rpx;height: 32rpx;">
						</image> -->
					</view>
					<view class="f24 ml20 mt10" style="display: flex;flex-wrap: wrap;">
						<!-- <view class="item_tag m10" v-for="(item,index) in detail.employVal" :key="index">{{item}}</view> -->
						<view class="mr10 mb10" v-for="(item,index) in detail.employVal" :key="index">
							<u-tag shape="circle" size="mini" color="#34314F" bgColor="#f7f7f7" :text="item"
								borderColor="#f7f7f7"></u-tag>
						</view>
					</view>
					<view class="f40 fw500 ml20"><span class="f24">￥</span>{{detail.goodsInfo.salePrice}}<span
							class="f24">/份</span></view>
				</view>
			</view>
			<view class="flex-cen flex-col bordertop mt20" v-if="detail.orderStatus==1">
				<image class="mt30" :src="api_host+detail.qrcode"
					style="width: 377rpx;height: 377rpx;border-radius: 15rpx;"></image>
				<view class="mt20 f32">
					<text class="fw500">券码</text>
					<text class="ml10">{{detail.orderCode}}</text>
					<text class="blue ml10" @click="fuzhi(detail.orderCode)">复制</text>
				</view>
			</view>
		</view>
		<view class="box_two date-box" v-if="detail.goodsInfo.roomType === 1">
			<text class="f32 fw500 label">入住日期:</text>
			<view class="date-detail">
				<text class="f28 order-date">{{ detail.orderDetails[0].startDate | transfromDate }} - {{ detail.orderDetails[0].endDate | transfromDate }}</text>
				<text class="f28 order-date-text">共{{ detail.orderDetails[0].buyCount }}晚</text>
			</view>
		</view>
		<view class="box_two">
			<view class="">
				<text class="f36 fw500">适用门店</text>
				<!-- <text>全部门店<image class="ml10" src="../static/caractere/righton.png" style="width: 24rpx;height: 24rpx;">
					</image></text> -->
			</view>
			<view class="flex-jus flex-start mt20" @click="openUrl('/groupPurchase/detail/shopdetail?id='+ detail.goodsInfo.goodsStores[0].id)">
				<view class="flex flex-start">
					<image :src="api_host+detail.oneStore.icon"
						style="width: 123rpx;height: 123rpx;border-radius: 23rpx;">
					</image>
					<view class="ml20 flex1">
						<p class="f32 fw500 textoverflow" style="width: 260rpx;">{{detail.oneStore.storeName}}</p>
						<p class="f24 mt10">人均 ￥{{detail.oneStore.unitPrice}}</p>
						<!-- <view class="f24">
							<text class="cff7">距你{{detail.oneStore.distance}}km</text>
						</view> -->
						<view class="f24 textoverflow" style="width: 260rpx;">
							<text>{{detail.oneStore.storeAddr}}</text>
						</view>
					</view>
				</view>
				<view class="flex">
					<view class="radius50 bgF0 p20 textC"
						@click="openAddress(detail.oneStore.longitude,detail.oneStore.latitude,detail.oneStore.storeName,detail.oneStore.storeAddr)">
						<view class="">
							<image src="../static/caractere/address.png" style="width:40rpx;height: 40rpx;">
							</image>
						</view>
						<view class="c343 f26">导航</view>
					</view>
					<view class="radius50 bgF0 p20 textC ml30" @click="maketel(detail.oneStore.phone)">
						<view class="">
							<image src="../static/caractere/tel.png" mode="" style="width:40rpx;height: 40rpx;">
							</image>
						</view>
						<view class="c343 f26">电话</view>
					</view>
				</view>
			</view>
		</view>

		<view class="usedetail flex-jus" @click="opendetail" v-if="detail.saleNumber!=null">
			<view class="f32">
				<text>使用情况</text>
				<text class="ml20 fw500">已使用{{detail.saleNumber}}份</text>
			</view>
			<image class="ml10" src="../static/caractere/righton.png" style="width: 32rpx;height: 32rpx;">
			</image>
		</view>

		<view class="tuangoudetail" v-if="detail.orderStatus==0 || detail.orderStatus==1">
			<view class="f36 fw500">团购详情</view>
			<view class="mt20" v-for="(item,index) in detail.goodsInfo.goodsGroups" :key="index">
				<p class="f28 fw500">{{item.title}}</p>
				<view class="flex-jus f26 mt20" v-for="(item2,index2) in item.goodsDetailList" :key="index2">
					<text>{{item2.detailName}}</text>
					<view>
						<span class="c999" v-if="item2.detailUnit!='/'">({{item2.detailUnit}}份)</span>
						<span class="ml20" v-if="item2.detailPrice!='/'">￥{{item2.detailPrice}}</span>
					</view>
				</view>
				<p class="f28 fw500 mt10" v-if="item.detailImg!=null">图片详情</p>
				<image class="mt10" v-for="(item3,index3) in item.detailImg" :key="index3" :src="api_host + item3"
					style="border-radius: 32rpx;height: 400rpx;" mode="widthFix"></image>
			</view>
			<!-- <u-collapse @change="change" @close="close" @open="open" :border="false" v-if="isMore">
				<u-collapse-item title="查看更多" name="Docs guide" :border="false">
					<view class="mt20" v-for="(item,index) in detail.goodsInfo.goodsGroups" :key="index">
						<p class="f28 fw500">{{item.title}}</p>
						<view class="flex-jus f26 mt20" v-for="(item2,index2) in item.goodsDetailList" :key="index2">
							<text>{{item2.detailName}}</text>
							<view>
								<span class="c999" v-if="item2.detailUnit!='/'">({{item2.detailUnit}}份)</span>
								<span class="ml20" v-if="item2.detailPrice!='/'">￥{{item2.detailPrice}}</span>
							</view>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse> -->
		</view>

		<view class="goumaixvzhi" v-if="detail.orderStatus==0 || detail.orderStatus==1">
			<view class="f36 fw500">购买须知</view>
			<view style="display: flex;" class="mt20" v-for="(item,index) in detail.goodsInfo.buyNotices" :key="index">
				<image :src="api_host+item.icon" style="width:32rpx;height: 32rpx;"></image>
				<view class="ml20 flex1">
					<p class="f28 fw500">{{item.title}}</p>
					<p class="f26 mt20" v-for="(item2,index2) in item.contents" :key="index2">
						{{item2.content}}
					</p>
				</view>
			</view>
			<!-- <u-collapse @change="change" @close="close" @open="open" :border="false" v-if="isMore2">
				<u-collapse-item title="查看更多" name="Docs guide" :border="false">
					<view style="display: flex;" class="mt20" v-for="(item,index) in detail.goodsInfo.buyNotices"
						:key="index">
						<image :src="api_host+item.icon" style="width:32rpx;height: 32rpx;"></image>
						<view class="ml20">
							<p class="f28 fw500">{{item.title}}</p>
							<p class="f26 mt10" v-for="(item2,index2) in item.contents" :key="index2">{{item2.content}}
							</p>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse> -->
		</view>
		<view class="box_three">
			<view v-if="detail.orderStatus==0" class="f36 fw500">应付金额 <span
					class="f24 ml20">￥</span>{{detail.orderPrice}}
				<image class="ml10" src="../static/caractere/righton.png" style="width: 24rpx;height: 24rpx;"></image>
			</view>
			<view v-if="detail.orderStatus==1 || detail.orderStatus==4" class="f36 fw500" @click="openfess">实付金额 <span
					class="f24 ml20">￥</span>{{detail.orderPrice}}
				<image class="ml10" src="../static/caractere/righton.png" style="width: 24rpx;height: 24rpx;"></image>
			</view>
			<view class="mt20">
				<text>订单编号</text>
				<text class="ml20">{{detail.orderCode}}</text>
			</view>
			<view class="mt20">
				<text>购买{{ countUnit2 }}数</text>
				<text class="ml20">{{detail.orderDetails[0].buyCount}}{{ countUnit2 }}</text>
			</view>
			<view class="mt20">
				<text>下单时间</text>
				<text class="ml20">{{detail.createTime}}</text>
			</view>
			<view class="mt20" v-if="detail.orderStatus>=1">
				<text>支付方式</text>
				<text class="ml20">微信支付</text>
			</view>
		</view>
		<u-gap height="100"></u-gap>

		<view class="bottomfixed fix-bot" v-if="detail.orderStatus==0">
			<view>
				<view>
					<span class="cff7 f32">￥</span>
					<span class="cff7 f54 fw500">{{detail.orderPrice}}</span>
					<span
						class="oldprice ml10">￥{{detail.goodsInfo.originalPrice*detail.orderDetails[0].buyCount}}</span>
				</view>
				<view>
					<text class="f24 cff7">共{{detail.orderDetails[0].buyCount}}{{ countUnit2 }}</text>
					<text class="f24 cff7 ml10">优惠￥{{ discountTotalPrice | toFixed2 }}</text>
					<text class="f24 c999 ml30" @click="openfess">明细</text>
				</view>
			</view>
			<view class="buyBtn flex-cen ml20" @click="payOrder">
				<text>提交订单</text>
			</view>
		</view>

		<view class="bottomfiexed2 fix-bot flex-au" v-if="detail.orderStatus==1">
			<view class="refund flex-cen" @click="cancelOrderbtn" v-if="detail.goodsInfo.isRefund==0">申请退款</view>
			<view class="refund2 flex-cen" v-else></view>
			<view class="onemoreorder flex-cen" @click="openUrl('/groupPurchase/detail/index?id='+detail.proId)">再来一单
			</view>
		</view>
		<view class="bottomfiexed2 fix-bot flex-au" v-if="detail.orderStatus==4">
			<view class="refund flex-cen" @click="openUrl('/groupPurchase/detail/index?id='+detail.proId)">再来一单</view>
			<view v-if="detail.isComm !== 1" class="onemoreorder flex-cen" @click="openUrl('/subpage/order/evaluate?id='+detail.id)">去评价
			</view>
		</view>

		<!-- 使用情况 -->
		<u-popup :show="show_detail" @close="closedetail" @open="show_detail = true" closeable round="20"
			bgColor="#F7F7F7">
			<view class="p30">
				<view class="f28 c343 bold">详情</view>
				<u-gap height="20"></u-gap>
				<view class="itembox mb20" v-for="(item,index) in detail.orderSaleVolumes" :key="index">
					<view class="flex-jus">
						<text class="f28 fw500">已使用</text>
						<!-- <view class="f26 flex" v-if="detail.goodsInfo.isAfterSale==0"
							@click="nologinJump('/subpage/service/apply?id='+detail.id + '&child_id=' + item.id +'&price='+item.price)">
							<text>申请售后</text>
							<image src="../static/caractere/righton.png" style="width: 32rpx;height: 32rpx;"></image>
						</view> -->
						<view class="f26 flex" v-if="detail.goodsInfo.isAfterSale==0" @click="toShouhou(item)">
							<text>申请售后</text>
							<image src="../static/caractere/righton.png" style="width: 32rpx;height: 32rpx;"></image>
						</view>
					</view>
					<view class="f26 c999 mt20">
						<text>使用份数</text>
						<text class="ml20">{{item.salesVolume}}份</text>
					</view>
					<view class="f26 c999 mt20">
						<text>消费门店</text>
						<text class="ml20">{{item.storeName}}</text>
					</view>
					<view class="f26 c999 mt20">
						<text>消费时间</text>
						<text class="ml20">{{item.createTime}}</text>
					</view>
					<!-- <view class="f26 c999 mt20">
						<text>券号</text>
						<text class="ml20">11895729891248</text>
					</view> -->
				</view>
				<!-- <view class="itembox mb20">
					<view class="flex-jus">
						<text class="f28 fw500">已使用</text>
						<view class="f26 flex">
							<text>申请售后</text>
							<image src="../static/caractere/righton.png" style="width: 32rpx;height: 32rpx;"></image>
						</view>
					</view>
					<view class="f26 c999 mt20">
						<text>使用份数</text>
						<text class="ml20">1份</text>
					</view>
					<view class="f26 c999 mt20">
						<text>消费门店</text>
						<text class="ml20">煌上煌（黄石港店）</text>
					</view>
					<view class="f26 c999 mt20">
						<text>消费时间</text>
						<text class="ml20">2024</text>
					</view>
					<view class="f26 c999 mt20">
						<text>券号</text>
						<text class="ml20">11895729891248</text>
					</view>
				</view> -->
			</view>
		</u-popup>
		<!-- 实付明细 -->
		<u-popup :show="show_fees" @close="closeshowfess" @open="show_fees = true" closeable round="20"
			bgColor="#F7F7F7">
			<view class="p30">
				<view class="f28 c343 bold">实付明细</view>
				<u-gap height="20"></u-gap>
				<view class="contentbox">
					<view class="flex-jus f28 fw500">
						<text class="">商品总价</text>
						<text>￥{{ originalTotalPrice | toFixed2 }}</text>
						<!-- <text>￥{{detail.goodsInfo.originalPrice*detail.orderDetails[0].buyCount}}</text> -->
					</view>
					<view class="flex-jus f26 mt20 borderbtm pb20">
						<text>参考价</text>
						<!-- <text>1份 x ￥{{detail.goodsInfo.salePrice}}</text> -->
						<text v-if="detail.goodsInfo.roomType === 0">{{ buyNum }}{{ countUnit2 }} x ￥{{ detail.goodsInfo.originalPrice }}</text>
						<view v-if="detail.goodsInfo.roomType === 1">
							<text v-for="item in referenceList" :key="item.date" class="fee-item">{{ item.count }}{{ countUnit2 }} x ￥{{item.originalPrice}}</text>
						</view>
					</view>
					<view class="flex-jus f28 fw500 mt20">
						<text class="">优惠</text>
						<text class="cff7">-￥{{ discountTotalPrice | toFixed2 }}</text>
					</view>
					<view class="flex-jus f26 mt20">
						<text>团购优惠</text>
						<view class="cff7 flex">
							<text>-￥{{ totalDiscountPrice | toFixed2 }}</text>
						</view>
					</view>
					<view class="flex-jus f26 mt20" v-if="detail.goodsInfo.goodsSeckill">
						<text>秒杀价优惠</text>
						<text class="cff7">-￥{{ goodsSeckillPrice | toFixed2 }}</text>
					</view>
					<!-- <view class="flex-jus f26 mt20">
						<text>秒杀价</text>
						<text class="cff7">-0</text>
					</view> -->
					<view class="flex-jus f26 mt20 borderbtm pb20">
						<text>优惠券</text>
						<text class="cff7">-￥{{detail.discountPrice}}</text>
					</view>
					<view class="flex-jus f28 fw500 mt20">
						<text class="">实付</text>
						<text>￥{{detail.orderPrice}}</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import appInfo from '@/common/appInfo.js'
	import {
		getOrderdetail,
		cancelOrder,
		payOrder,
		advanceStatus,
		payOrderappend
	} from '@/common/api_order.js'
	export default {
		data() {
			return {
				text: '复制的文本',
				show_detail: false,
				show_fees: false,
				id: '',
				detail: {
					goodsInfo: {
						salePrice: '',
						originalPrice: ''
					},
					orderDetails: [{
						buyCount: ''
					}]
				},
				expiration_time: '',
				isMore: false,
				isMore2: false,
			}
		},
		onLoad(option) {
			this.id = option.id
		},
		onShow() {
			if (this.id) {
				this.getOrderdetail()
			}
		},
		computed: {
			totalPrice() { //总计
				return this.detail.goodsInfo.salePrice * this.detail.orderDetails[0].buyCount
			},
			totaloriginalPrice() { //原价总计
				return this.detail.goodsInfo.originalPrice * this.detail.orderDetails[0].buyCount
			},
			// 优惠总额
			totalDiscountPrice() {
				if (this.detail.goodsInfo.roomType === 1) {
					console.log(this.actualHotelDays, 'this.actualHotelDays')
					let originaCount = 0
					let salePrice = 0
					this.actualHotelDays.forEach(item => {
						originaCount += item.originalPrice
						salePrice += item.salePrice
					})
					return originaCount - salePrice
				} else {
					return (this.detail.goodsInfo.originalPrice - this.detail.goodsInfo.salePrice) * this.buyNum
				}
			},
			// 商品原价
			originalTotalPrice() {
				return this.detail.goodsInfo.originalPrice * this.buyNum
			},
			// 秒杀优惠
			goodsSeckillPrice() {
				if (this.detail.goodsInfo.goodsSeckill) {
					return (this.detail.goodsInfo.salePrice - this.detail.goodsInfo.goodsSeckill.price) * this.buyNum
				}
				
			},
			// 费用明细--优惠总价
			discountTotalPrice() {
				if (this.detail.goodsInfo.goodsSeckill) {
					return Number(this.totalDiscountPrice) + Number(this.detail.discountPrice) + Number(this.goodsSeckillPrice)
				} else {
					return Number(this.totalDiscountPrice) + Number(this.detail.discountPrice)
				}
			},
			// 合并重复项
			referenceList() {
				return this.sumDuplicatePrices(this.actualHotelDays)
			},
			// 实际入住酒店时间
			actualHotelDays() {
				if (this.detail.orderRooms && this.detail.orderRooms.length) {
					return this.detail.orderRooms.splice(0, this.detail.orderRooms.length - 1)
				}
				return []
			},
			buyNum() {
				return this.detail.orderDetails[0].buyCount
			},
			countUnit() {
				return this.detail.goodsInfo.roomType === 1 ? '晚': '件'
			},
			countUnit2() {
				return this.detail.goodsInfo.roomType === 1 ? '晚': '份'
			},
		},
		filters: {
			// 时间戳处理
			formatDate: function(value, spe = '/') {
				// value = value * 1000
				let data = new Date(value);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month >= 10 ? month : "0" + month;
				day = day >= 10 ? day : "0" + day;
				h = h >= 10 ? h : "0" + h;
				mm = mm >= 10 ? mm : "0" + mm;
				s = s >= 10 ? s : "0" + s;
				return `${year}${spe}${month}${spe}${day}`;
			},
			toFixed2(val) {
				return Number(val).toFixed(2)
			},
			// 转成年月日
			transfromDate(str) {
				let reg = /(\d{4})\-(\d{2})\-(\d{2})/;
				return str.replace(reg,"$1年$2月$3日");
			}
		},
		methods: {
			toShouhou(item) {
				if (this.detail.aftersales == null) {
					uni.navigateTo({
						url: '/subpage/service/apply?id=' + this.detail.id + '&child_id=' + item.id + '&price=' +
							item.price
					})
				} else {
					uni.showToast({
						title: "已申请售后，请在'我'-'售后'查看",
						icon: 'none'
					})
				}
			},
			sumDuplicatePrices(items) {
				console.log(items, 'items')
			  let priceCount = {};
			  items.forEach(item => {
				item.count = 1
			    if (priceCount[item.originalPrice]) {
			      priceCount[item.originalPrice].count += item.count;
			    } else {
			      priceCount[item.originalPrice] = { originalPrice: item.originalPrice, count: item.count };
			    }
			  });
			  return Object.values(priceCount);
			},
			opendetail() {
				this.show_detail = true
			},
			closedetail() {
				this.show_detail = false
			},
			openfess() {
				this.show_fees = true
			},
			closeshowfess() {
				this.show_fees = false
			},
			async getOrderdetail() {
				uni.showLoading({
					mask: true
				})
				const res = await getOrderdetail({
					id: this.id
				})
				if (res.code == 200) {
					this.detail = res.data
					const {
						userAddr,
						orderDetails,
						orderPro,
						sceneImages,
						goodsInfo,
					} = this.detail
					// this.detail.append_imgs = sceneImages?sceneImages.split(','):[]
					// this.address = userAddr
					// this.sku = orderDetails
					// this.pro = orderPro
					this.detail.employVal = goodsInfo.goodEmployValues.split(',')
					// this.detail.goodsGroupsOne = goodsInfo.goodsGroups[0]
					// this.detail.goodsGroupsMore = goodsInfo.goodsGroups.splice(0, 1)
					// this.detail.buyNoticesOne = goodsInfo.buyNotices[0]
					// this.detail.buyNoticesMore = goodsInfo.buyNotices.splice(0, 1)
					this.detail.oneStore = goodsInfo.goodsStores[0]
					this.expiration_time = new Date(this.detail.createTime).getTime() + (24 * 60 * 60 * goodsInfo
						.lifespan * 1000)
					if (this.detail.orderStatus == 0) {
						let nowTimes = new Date().getTime()
						let createTime = this.detail.createTime.replace(/-/g, "/")
						let orderTimes = new Date(createTime).getTime()
						let times30 = 30 * 60 * 1000
						this.detail.downTimes = orderTimes + times30 - nowTimes
					}
					goodsInfo.goodsGroups.forEach(item => {
						if (item.detailImg) {
							item.detailImg = item.detailImg.split(',')
						}
					})
					// if (goodsInfo.goodsGroups.length >= 1) {
					// 	console.log('查看更多');
					// 	this.isMore = true
					// } else {
					// 	this.isMore = false
					// }
					// if (goodsInfo.buyNotices.length >= 1) {
					// 	this.isMore2 = true
					// } else {
					// 	this.isMore2 = false
					// }
				}
				uni.hideLoading()
			},
			async cancelOrderbtn() {
				const that = this;
				uni.showModal({
					title: '退款申请一旦提交将无法撤销，是否确认继续退款',
					confirmText: '确定',
					success(res) {
						if (res.confirm) {
							that.cancelOrder()
						}
					}
				})
			},
			async cancelOrder(id) {
				uni.showLoading({
					mask: true
				})
				const res = await cancelOrder({
					id: this.id
				})
				if (res.code == 200) {
					this.getOrderdetail()
				}
				uni.hideLoading()
			},
			openAddress(lon, lat, name, addr) {
				uni.openLocation({
					latitude: parseFloat(lat),
					longitude: parseFloat(lon),
					name: name,
					address: addr
				})
			},
			maketel(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			fuzhi(val) {
				uni.setClipboardData({
					data: val, //text是要复制的文本
					success: function(res) {
						uni.getClipboardData({
							//这个api是把拿到的数据放到剪切板中的
							success: function(res) {
								wx.showToast({
									title: '复制成功',
									icon: "none",
								})
							}
						})
					}
				})
			},
			async payOrder() {
				const that = this
				// #ifdef MP-WEIXIN
				let messageRes = await this.$utils.messageSubscriptionAuthorization(appInfo.tmplIds.order);
				// #endif
				uni.showLoading({
					mask: true,
					title: '正在支付中...'
				})
				const res = await payOrder({
					id: this.id
				})
				if (res.code == 200) {
					let config = res.data
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: config.timeStamp.toString(),
						nonceStr: config.nonceStr,
						package: 'prepay_id=' + config.package.prepay_id,
						signType: config.signType,
						paySign: config.paySign,
						success() {
							uni.hideLoading()
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							})
							setTimeout(() => {
								that.getOrderdetail()
							}, 800)
						},
						fail() {
							uni.hideLoading()
							uni.showToast({
								title: '支付失败',
								icon: 'error'
							})
						}
					})
				}
				uni.hideLoading()

			},
		}
	}
</script>

<style lang="scss">
	.u-cell__body.data-v-1c4434ae {
		justify-content: center !important;
	}

	.u-collapse-item__content__text.data-v-2675fb21 {
		padding: 0 !important;
	}

	.u-cell__body__content.data-v-1c4434ae {
		flex: none !important;
	}

	.box_top {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.usedetail {
		width: 688rpx;
		height: 131rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
	}

	.box_one {
		width: 688rpx;
		min-height: 262rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
		overflow: hidden;
	}

	.box_two {
		width: 688rpx;
		height: 256rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin: 40rpx auto;
	}
	.date-box {
		display: flex;
		height: auto;
		.label {
			width: 164rpx;
		}
		.order-date {
			margin-right: 20rpx;
		}
		// .order-date
	}

	.tuangoudetail {
		width: 688rpx;
		min-height: 300rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		margin: 40rpx auto;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.goumaixvzhi {
		width: 688rpx;
		min-height: 300rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		margin: 40rpx auto;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.box_three {
		width: 688rpx;
		min-height: 279rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin: 40rpx auto;
	}

	.bottomfixed {
		height: 165rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 38rpx 38rpx 0rpx 0rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;

		.buyBtn {
			width: 227rpx;
			height: 92rpx;
			background: #FFDE6D;
			border-radius: 38rpx;
			backdrop-filter: blur(25px);
		}

		.oldprice {
			width: 65rpx;
			height: 31rpx;
			font-weight: 400;
			font-size: 27rpx;
			color: #ddd;
			line-height: 31rpx;
			text-align: left;
			font-style: normal;
			text-decoration: line-through
		}
	}

	.bottomfiexed2 {
		width: 750rpx;
		height: 165rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 38rpx 38rpx 0rpx 0rpx;

		.refund {
			width: 319rpx;
			height: 92rpx;
			background: #F4F4F6;
			border-radius: 38rpx;
		}

		.refund2 {
			width: 319rpx;
			height: 92rpx;
			background: #fff;
			border-radius: 38rpx;
		}

		.onemoreorder {
			width: 319rpx;
			height: 92rpx;
			background: #FFDE6D;
			border-radius: 38rpx;
		}
	}

	.itembox {
		width: 688rpx;
		height: 285rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}
</style>